<template>
  <div class="order">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first">
        <div class="head">
          <el-input size="large" v-model="input2" style="width: 500px" placeholder="Type something"
            :prefix-icon="Search" />

          <!-- 支付状态筛选器 -->
          <el-select v-model="selectedPaymentStatus" size="large" filterable placeholder="支付状态" style="width: 120px">
            <el-option size="large" v-for="status in paymentStatusOptions" :key="status.value" :label="status.label"
              :value="status.value" />
          </el-select>

          <!-- 订单状态筛选器 -->
          <el-select v-model="selectedOrderStatus" size="large" filterable placeholder="订单状态" style="width: 120px">
            <el-option size="large" v-for="status in orderStatusOptions" :key="status.value" :label="status.label"
              :value="status.value" />
          </el-select>

          <!-- 日期选择器 -->
          <div class="demo-range">
            <el-date-picker v-model="selectedDateRange" type="daterange" size="large" range-separator="To"
              start-placeholder="Start date" end-placeholder="End date" format="yyyy-MM-dd" style="width: 240px" />
          </div>

          <div class="od">
            <cp-icon name="order-下载"></cp-icon>
            <span>下载</span>
          </div>
        </div>

        <!-- 过滤后的表格数据 -->
        <el-table :data="paginatedTableData" style="width: 100%">
          <el-table-column type="selection" width="120" />
          <el-table-column label="订单" width="220">
            <template #default="scope">
              <div style="display: flex">
                <p style="margin: 5px 0">{{ scope.row.name1 }}</p>
                <p style="margin: 5px 0">#ID{{ scope.row.id }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="日期" width="220">
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column label="买家" width="220">
            <template #default="scope">{{ scope.row.buyer }}</template>
          </el-table-column>
          <el-table-column label="支付状态" width="220">
            <template #default="scope">
              <span :class="{ span: scope.row.palyStatu === '未支付' }">{{ scope.row.palyStatu }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="220">
            <template #default="scope">
              <span :class="{
                span: scope.row.statu === '已发货',
                span1: scope.row.statu === '待发货',
                span2: scope.row.statu === '已取消',
              }">{{ scope.row.statu }}</span>
            </template>
          </el-table-column>
          <el-table-column label="价格" width="220">
            <template #default="scope">
              <h4>￥{{ scope.row.price }}</h4>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div style="margin-left:20px" class="demo-pagination-block">
          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[2, 5, 10, 15]"
            :size="'small'" :layout="'total, sizes, prev, pager, next, jumper'" :total="filteredTableData.length"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </el-tab-pane>

      <!-- 其他标签页 -->
      <el-tab-pane label="待付款" name="1">
        <el-empty description="暂无数据" />
      </el-tab-pane>
      <el-tab-pane label="待发货" name="2">
        <el-empty description="暂无数据" />
      </el-tab-pane>
      <el-tab-pane label="已发货" name="3">
        <el-empty description="暂无数据" />
      </el-tab-pane>
      <el-tab-pane label="退款中" name="4">
        <el-empty description="暂无数据" />
      </el-tab-pane>
      <el-tab-pane label="已完成" name="5">
        <el-empty description="暂无数据" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'

// 页码和每页条数
const currentPage = ref(1)  // 默认设置为第一页
const pageSize = ref(5)     // 默认每页显示5条数据
const activeName = ref('first')
// 订单状态选项
const orderStatusOptions = [
  { value: '待发货', label: '待发货' },
  { value: '已发货', label: '已发货' },
  { value: '已取消', label: '已取消' },
  { value: '已完成', label: '已完成' },
]

// 支付状态选项
const paymentStatusOptions = [
  { value: '已支付', label: '已支付' },
  { value: '未支付', label: '未支付' },
]

// 筛选条件
const selectedOrderStatus = ref('') // 订单状态筛选
const selectedPaymentStatus = ref('') // 支付状态筛选
const selectedDateRange = ref([null, null]) // 日期范围筛选

// 示例数据
const tableData = [
  {
    date: '2016-05-04',
    name: 'Aleyna Kutzner',
    price: '198',
    id: 1111,
    name1: '萝卜',
    palyStatu: '已支付',
    buyer: '张强',
    statu: '待发货',
  },
  {
    date: '2016-05-04',
    name: 'Aleyna Kutzner',
    price: '198',
    id: 1111,
    name1: '萝卜',
    palyStatu: '已支付',
    buyer: '张强',
    statu: '待发货',
  },
  {
    date: '2016-05-03',
    name: 'Helen Jacobi',
    price: '188',
    palyStatu: '未支付',
    id: 1111,
    name1: '萝卜',
    buyer: '张强',
    statu: '待发货',
  },
  {
    date: '2016-05-02',
    name: 'Brandon',
    price: '178',
    palyStatu: '未支付',
    id: 1111,
    name1: '萝卜',
    buyer: '张强',
    statu: '已取消',
  },
  {
    date: '2016-05-01',
    name: 'Margie Smith',
    price: '168',
    palyStatu: '已支付',
    id: 1111,
    name1: '萝卜',
    buyer: '张强',
    statu: '已发货',
  },
]

// 根据日期范围、订单状态、支付状态进行过滤
const filteredTableData = computed(() => {
  return tableData.filter(item => {
    const [startDate, endDate] = selectedDateRange.value

    // 日期筛选
    const itemDate = new Date(item.date)
    if (startDate && itemDate < startDate) {
      return false
    }
    if (endDate && itemDate > endDate) {
      return false
    }

    // 订单状态筛选
    if (selectedOrderStatus.value && item.statu !== selectedOrderStatus.value) {
      return false
    }

    // 支付状态筛选
    if (selectedPaymentStatus.value && item.palyStatu !== selectedPaymentStatus.value) {
      return false
    }

    return true
  })
})

// 计算分页后的数据
const paginatedTableData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredTableData.value.slice(start, end)
})

// 分页大小改变
const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  currentPage.value = 1 // 每次修改页面大小时，重置到第一页
}

// 当前页改变
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
}
</script>

<style lang="scss" scoped>
.order {
  width: 100%;
  height: 100%;
  padding: 25px;
  box-sizing: border-box;

  .el-tabs {
    width: 100%;
    min-width: 1540px;
  }

  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .od {
      display: flex;
      align-items: center;
      background: #fafafa;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 10px;
    }
  }
}

.el-table {
  width: 100%;
  margin: 15px 0;

  .el-table-column {
    margin: 0 50px !important;
  }
}

span {
  background: #e7f7ef;
  padding: 5px 10px;
  color: #16b266;
  border-radius: 10px;
  font-size: 12px;
  display: inline-block;
}

.span {
  background: #f4f0ff;
  color: #baa1ff;
}

.span1 {
  background: #fff0e6;
  color: #fea565;
}

.span2 {
  background: #fff0f0;
  color: #fd7777;
}

.demo-pagination-block {
  margin-top: 50px;
}
</style>
